<template>
	<!-- 出库页面 -->
	<view class="outbound">
		<!-- 左侧导航栏 -->
		<view class="outboundMain">
			<view class="left">
				<leftGroup :clableList="clableList" @clableMainhandle="handleChildEvent"></leftGroup>
			</view>
			<view class="right" :style="'height:'+recyclableHeight+'rpx;'">
				<view class="childrenList" v-for="(item,index) in childrenList" :key="index">
					<view class="classimg">
						<image :src="item.pic_url" mode=""></image>
					</view>
					<view class="text">
						<view class="text-title">{{item.name}}/{{item.unit}}</view>
						<view class="nowNum" v-if="boundId==0">目前数量：
							<text class="number">{{item.remain}}</text>
						</view>
						<view class="nowNum" v-else-if="boundId==1">累计出库：
							<text class="number">{{item.already}}</text>
						</view>
					</view>
					<view class="outboundButton" v-show="boundId==0" @tap="outbount(item)">出库</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import leftGroup from "@/component/leftGroup.vue" //左侧导航栏组件
	import util from '@/component/commen/api/util.js'; //引入封装的请求
	export default {
		components: {
			leftGroup
		},
		data() {
			return {
				clableList: [], //左侧列表数据
				childrenList: [], //右侧数据
				recyclableHeight:"",//页面可视高度
				boundId:0,//点击进入的类型：0:出库,1:累计出库,
			};
		},
		onLoad(value) {
			console.log("进入id:",value.outboundId)
			this.boundId = value.outboundId
		},
		onShow() {
			this.getleftList()
			this.getsystemInfo()
		},
		methods: {
			getleftList() { //获取左侧分类列表
				console.log(uni.getStorageSync("packid"))
				var params = {
					do: "pack",
					op: "inventory",
					packid: uni.getStorageSync("packid")
				}
				util.requestWithSign(params).then(res => {
					console.log("左侧列表数据:", res)
					this.clableList = res.data
					this.childrenList = this.clableList[0].children
				})
			},
			handleChildEvent(value) {
				console.log("子组件返回的值：", value)
				this.childrenList = value
			},
			outbount(value){//点击出库
				var _this = this
				console.log("出库数据：",value)
				if(value.remain==0){
					return uni.showToast({
						title:"当前出库数量为0",
						icon:"none"
					})
				}
				uni.showModal({
					title:"确定出库吗？",
					success(res){
						console.log(res)
						if(res.confirm==true){
							var params = {
								do:"pack",
								op:"delivery",
								packid:uni.getStorageSync("packid"),//回收站id
								categoryid:value.id,//类别id
								count:value.remain
							}
							util.requestWithSign(params).then(res=>{
								console.log(res)
								uni.showModal({
									title:res.message,
									showCancel:false,
									success() {
										_this.getleftList()
									}
								})
							})
						}else if(res.cancel==true){
							console.log("取消")
						}
					}
				})
				
			},
			getsystemInfo() { //获取当前屏幕信息
				// 设备系统信息
				let sysInfo = uni.getSystemInfoSync()
				// console.log(sysInfo)
				// 机型适配比例系数
				let scaleFactor = 750 / sysInfo.windowWidth
				// 当前机型屏幕高度
				let windowHeight = sysInfo.windowHeight * scaleFactor
				// 滑块对应内容高度=屏幕高度-底部tabbar高度:120rpx-头部图片：210rpx-顶部滑块：80rpx
				this.recyclableHeight = windowHeight 
				// 当前机型屏幕宽度
				let windowWidth = sysInfo.windowWidth * scaleFactor
				// 状态栏高度
				let statusBarHeight = (sysInfo.statusBarHeight) * scaleFactor
				// 导航栏高度(ps:只针对微信小程序有效)
				// let navHeight = 0
				// 微信小程序头部胶囊信息
				// #ifdef MP-WEIXIN
				const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
				// 胶囊高度
				let menuButtonHeight = menuButtonInfo.height * scaleFactor
				// 胶囊宽度
				let menuButtonWidth = menuButtonInfo.width * scaleFactor
				// 胶囊上边界的坐标
				let menuButtonTop = menuButtonInfo.top * scaleFactor
				// 胶囊右边界的坐标
				let menuButtonRight = menuButtonInfo.right * scaleFactor
				// 胶囊下边界的坐标
				let menuButtonBottom = menuButtonInfo.bottom * scaleFactor
				// 胶囊左边界的坐标
				let menuButtonLeft = menuButtonInfo.left * scaleFactor
				// 微信小程序：导航栏高度 = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
				this.navHeight = menuButtonHeight + (menuButtonTop - statusBarHeight) * 2
				// console.log(this.navHeight)
				// 
				// #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	.outbound {
		.outboundMain {
			display: flex;
			// border: 1px solid #f00;
			.left {
				width: 25%;
				// border: 1px solid #000;

			}

			.right {
				width: 75%;
				background: #fff;
				padding:0 20rpx;
				box-sizing: border-box;
				.childrenList {
					margin-top: 20rpx;					display: flex;
					width: 100%;
					align-items: center;
					// border: 1px solid #000;
					.classimg {
						width: 100rpx;
						height: 100rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 50rpx;
						}
					}

					.text {
						margin-left: 20rpx;
						.text-title {
							font-size: 28rpx;
							font-weight: bold;
						}

						.nowNum {
							margin-top: 10rpx;
							font-size: 26rpx;
							.number {
								color: #00b388;
							}
						}
					}

					.outboundButton {
						width: 106rpx;
						height: 44rpx;
						border-radius: 34rpx;
						border: #eeeeef solid 2rpx;
						background-color: #f7f7f7;
						font-size: 24rpx;
						font-weight: 700;
						color: #00b388;
						margin-left: auto;
						text-align: center;
					}
				}
			}
		}

	}
</style>